//scss 语法糖包含常用的布局方式 flex column
@import url('./scss-suger.scss');
//重置 element-plus 样式
@import url('./reset-elemenet-plus-style.scss');
//动画文件
@import url('./transition.scss');

//reset style
body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

* {
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

a:focus,
a:active {
    outline: none;
}

a,
a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
    font-weight: 400;
    line-height: 1;
}

span,
output {
    display: inline-block;
    line-height: 1;
}

//scroll
@mixin main-show-wh() {
    width: 100%;

    /* css 声明 */
    //height: calc(100vh - #{$navBarHeight} - #{$tagViewHeight} - #{$appMainPadding * 2});
    height: calc(
        100vh - #{var(--nav-bar-height)} - #{var(--tag-view-height)} - #{calc(
                var(--app-main-padding) * 2
            )}
    );
}

.scroll-y {
    @include main-show-wh();

    overflow-y: auto;
}

.scroll-x {
    @include main-show-wh();

    overflow-x: auto;
}

.scroll-xy {
    @include main-show-wh();

    overflow: auto;
}
